<template>
	<view class="content">
		<!-- v-if="token" -->
		<view class="" >
			<view class="minecont">
				<view class="user_box" @click="changeUserInfo">
					<image class="user_avatar" :src="users.avatar" mode="aspectFill"></image>
					<view class="user_info">
						<view class="nickname ellipsis">{{users.nickname}}</view>
						<view class="user_bot_box">
							<view class="box_list" v-for="(item,index) in toplist" :key="index" @click="goJump(item.type)">
								
								<view class="box_txt">{{item.title}} <text v-if="index == 0">:{{users.integral}}</text></view>
							</view>
						</view>
					</view>
				</view>  
				<view class="">
					<view class="user_bot_box" style="justify-content: space-around;margin-top: 20rpx;">
						<view class="box_list" style="justify-content: center;box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);width: 40%;" v-for="(item,index) in toplist1" :key="index" @click="goJump(item.type)">
							<image class="box-icon" :src="item.image" mode=""></image>
							<view class="box_txt">{{item.title}} </view>
						</view>
					</view>
				</view>
			</view>
			<view class="userOrder">
				<view class="botgroup">
					<view class="botgrouplist" @click="goUserDetail(1)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/info.png" mode=""></image>
						</view>
						<view class="listdsc">个人信息</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(3)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/buy_order.png" mode=""></image>
						</view>
						<view class="listdsc">我的买单</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(4)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/out_order.png" mode=""></image>
						</view>
						<view class="listdsc">我的卖单</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(5)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_11@3x.png" mode=""></image>
						</view>
						<view class="listdsc">我的设置</view>
					</view>
					
					<view class="botgrouplist" @click="goUserDetail(7)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_7@3x.png" mode=""></image>
						</view>
						<view class="listdsc">收货地址</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(8)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_8@3x.png" mode=""></image>
						</view>
						<view class="listdsc">实名认证</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(13)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/set.png" mode=""></image>
						</view>
						<view class="listdsc">规则指引</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(9)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_9@3x.png" mode=""></image>
						</view>
						<view class="listdsc">用户指南</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(10)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_10@3x.png" mode=""></image>
						</view>
						<view class="listdsc">客服</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(11)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_-1@3x.png" mode=""></image>
						</view>
						<view class="listdsc">公告</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(12)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/set.png" mode=""></image>
						</view>
						<view class="listdsc">设置</view>
					</view>  
					
				</view>
				
				
			</view>
			<view class="userOrder">
				<view class="botgroup" style="margin-top: 20rpx;">
					<view class="botgrouplist" @click="goUserDetail(14)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/in_order.png" mode=""></image>
						</view>
						<view class="listdsc">积分订单</view>
					</view>  
					<view class="botgrouplist" @click="goUserDetail(15)">
						<view class="userlisticon">
							<image class="image" src="../../../../../static/team_order.png" mode=""></image>
						</view>
						<view class="listdsc">收益</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(16)">
						<view class="userlisticon">
							<image class="image" src="../../../../../static/weixinteam.png" mode=""></image>
						</view>
						<view class="listdsc">官方微信群</view>
					</view>
					<view class="botgrouplist" @click="goUserDetail(6)">
						<view class="userlisticon">
							<image class="image" src="../../../static/new_image/icon_mine_6@3x.png" mode=""></image>
						</view>
						<view class="listdsc">粉丝</view>
					</view>
				</view>
			</view>
		</view>
		 
		<!-- 客服电话 -->   
		
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="customer">
				<view class="title">客服微信</view>
				<view class="phone">联系电话：{{phone}}</view>
				<view class="tuiimg">
					<image class="tuipic" :src="datasImg" mode=""></image>
					<view class="tuipic_txt">客服微信</view>
				</view>
				<view class="sure" @click="cancel">知道了</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import api from "../../../common/api/api.js"
	import uniPopup from "../../../components/uni-popup/uni-popup.vue"
	// import Authorization from "@/pages/client/authorization/index";
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				isShow: false,
				colorConfirm: 'transparent',
				toplist: [{
						type: 1,
						image: '',
						title: '我的积分'
					}
				],
				toplist1: [{
						type: 1,
						image: 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/usericon.png',
						title: '足迹'
					},
					{
						type: 2,
						image: 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/usericon1.png',
						title: '收藏'
					}
				],
				userList: [{
						type: 1,
						image: '../../../static/new_image/info.png',
						title: '个人信息'
					},
					// {
					// 	type: 2,
					// 	image: "https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/user9.png",
					// 	title: '钱包'
					// },
					{
						type: 3,
						image: "../../../static/new_image/buy_order.png",
						title: '我的买单'
					},
					{
						type: 4,
						image: "../../../static/new_image/out_order.png",
						title: '我的卖单'
					},
					{
						type: 5,
						image: "../../../static/new_image/icon_mine_11@3x.png",
						title: '支付设置'
					},
					{
						type: 6,
						image: "../../../static/new_image/icon_mine_6@3x.png",
						title: '佣金'
					},
					{
						type: 7,
						image: "../../../static/new_image/icon_mine_7@3x.png",
						title: '收货地址'
					},
					{
						type: 8,
						image: "../../../static/new_image/icon_mine_8@3x.png",
						title: '实名认证'
					},
					{
						type: 13,
						image: "../../../static/new_image/set.png",
						title: '规则指引'
					},
					{
						type: 9,
						image: "../../../static/new_image/icon_mine_9@3x.png",
						title: '用户指南'
					},
					{
						type: 10,
						image: "../../../static/new_image/icon_mine_10@3x.png",
						title: '客服'
					},
					{
						type: 11,
						image: "../../../static/new_image/icon_mine_-1@3x.png",
						title: '公告'
					},
					{
						type: 12,
						image: "../../../static/new_image/set.png",
						title: '设置'
					},
					{
						type: 14,
						image: "../../../static/new_image/in_order.png",
						title: '积分订单'
					}
					
				],
				users: {},
				userInfo: {},
				userPermiss: '',
				token:"",
				datasImg:'',
				phone:'',
				mobile:'',
				timeText:'获取验证码',
				countdown:60,
				code:'',
				invitationCode:'' // 邀请码
			}
		},
		onLoad() {
			let that = this;
			that.getUserInfo();
			uni.$on('login', function(data) {
				console.log('监听到事件来自 login ，携带参数 msg 为：' + data.msg);
				// that.cacheHelper.isLogin()
				// that.cacheHelper.updateUserInfo()
				that.getUserInfo();
			})
			uni.$on('update', function(data) {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.getUserInfo();
			})
			// if (that.cacheHelper.isLogin()) {
			// 	that.getUserInfo()
			// 	// that.getPhone();
			// } else {
			// 	uni.navigateTo({   
			// 		url: '../authorization/index',
			// 	});
			// }
			
			that.getPhone();
		},
		onShow() {
			
			let that = this;
			// if (!that.cacheHelper.isLogin()) {
			// 	uni.navigateTo({
			// 		url: '../authorization/index',
			// 	});
			// }
			that.getUserInfo();
		},
		onUnload() {
			uni.$off('login')
			uni.$off('update')
		},
		filters: {
			changeVip: function(e) {
				if (e == 1) {
					return 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/vip1.png'
				} else if (e == 2) {
					return 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/vip2.png'
				} else if (e == 3) {
					return 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/vip3.png'
				}
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			let that = this;
			that.getUserInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 页面跳转
			goUserDetail: function(type) {
				if (type == 1) { // 签到  // 个人信息
					// uni.navigateTo({
					// 	url: 'userSignIn/userSignIn',
					// });
					uni.navigateTo({
						url: 'userSet/userSet',
					});
				} else if (type == 2) { // 钱包
					uni.navigateTo({
						url: 'userWallet/userWallet',
					});
				} else if (type == 3) { // 我的买单
					uni.navigateTo({
						url: 'userPayBill/userPayBill',
					});
				} else if (type == 4) { // 我的卖单
					uni.navigateTo({
						url: 'userSaleBill/userSaleBill',
					});
				} else if (type == 5) { // 支付设置
					uni.navigateTo({
						url: 'paymentSetting/paymentSetting',
					});
				} else if (type == 6) { // 佣金
					uni.navigateTo({
						url: 'userBrokerage/userBrokerage',
					});
				} else if (type == 7) { // 收货地址
					uni.navigateTo({
						url: 'address/address',
					});
				} else if (type == 8) { // 实名认证
					let authenticationStatus = this.users.authenticationStatus;
					console.log(authenticationStatus)
					if (authenticationStatus == -1) {
						uni.navigateTo({
							url: 'authentication/authentication',
						});
					} else {
						uni.navigateTo({
							url: 'authentication/authenticationStatus/authenticationStatus?authenticationStatus=' + authenticationStatus,
						});
					}
				} else if (type == 9) { // 常见问题
					uni.navigateTo({
						url: 'commonProblem/commonProblem',
					});

				} else if (type == 10) { // 客服
					this.getPhone();
					uni.hideTabBar();
					this.$refs.popup.open()
				} else if (type == 11) { // 消息
					uni.navigateTo({
						url: '../notice/notice',
					});
				} else if (type == 12) { // 设置
					uni.navigateTo({
						url: 'userGetSet/userGetSet',
					});
				} else if (type == 13) {
					uni.navigateTo({
						url: 'regulation/regulation',
					}); 
				}else if (type == 14) {
					uni.navigateTo({
						url: 'order/order',
					});  
				}else if (type == 15) {
					uni.navigateTo({
						url: '/pages/order/team',
					});  
				}else if (type == 16) {
					uni.navigateTo({
						url: './weixin_team',
					});  
				}
			},
			// 我的邀请码
			goJump: function(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/footer/index',
					});
				} else if (type == 2) {
					uni.navigateTo({
						url: '/pages/footer/like',
					});
				}
			},
			cancel: function() {
				this.$refs.popup.close()    
				uni.showTabBar();
			},

			// 获取我的信息
			getUserInfo: function() {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.users = res.data;
					this.$queue.setData("userId", res.data.uid);
					this.userInfo = res.data.yxUserinfo;
					this.userPermiss = res.data.userPermiss
					let isHavePhone = res.data.isHavePhone;
					if (isHavePhone == 0) {
						uni.hideTabBar();
						this.$refs.popup1.open();
					}
					// this.cacheHelper.updateUserInfo()
				})
			},
			// 获取客服电话
			getPhone: function() {
				let code = 'kfdh'
				api.getServiceTel(code).then(res => {
					console.log(res,"----微信")
					this.phone = res.data.memo;
					this.datasImg = res.data.images;
				})
			},
			// 修改个人信息
			changeUserInfo: function () {
				uni.navigateTo({
					url: 'userSet/userSet',
				});
			},
			
			// 获取验证码
			getCode: function () {
				var that = this;
				var mobile = that.mobile;
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){ 
					uni.showToast({
						title: '手机号格式不正确',
						icon:'none',
						duration:2000
					});
					return false; 
				} 
				api.getVerifyCode({
					phone:mobile,
					type:'register'
				}).then(res => {
					console.log(res,"====")
					that.tui.toast(res.msg)
					that.setTime();
				})
				
			},
			// 倒计时
			setTime:function(){
				var that = this;
				var time = that.countdown;
				if(time == 0){
					that.timeText = "获取验证码";
					that.disabled = false;
					time = 60; 
					that.countdown = time;
					return
				}else{
					that.disabled = true
					var timea = time-1;
					//console.log(timea)
					that.countdown = timea
					that.timeText = '等待'+'('+timea+')秒';
				}
				setTimeout(function(){
					that.setTime()
				},1000)
			},
			// 协议
			protocal: function (type) {
				uni.navigateTo({
					url: '../login/potocol/potocol?type=' + type,
				});
			},
			
			// 绑定
			bindphone: function () {
				let that = this;
				if (!that.mobile) {
					that.tui.toast('请输入手机号码');
					return
				} else if (!that.code) {
					that.tui.toast('请输入验证码');
					return
				}
				api.getBindPhone({
					nowPhone:that.mobile,
					code:that.code
					// invitationCode:that.invitationCode
				}).then(res => {
					console.log(res,"----绑定")
					that.tui.toast(res.msg)
					that.$refs.popup1.close();
					that.cacheHelper.updateUserInfo();
					setTimeout(function () {
						uni.$emit('update', {msg: '用户登录'})
					},500)
					
				})
				
			}
			
			

		}

	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-family: PingFang SC;
		background: #F5F5F5;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.minecont {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 34rpx 20rpx 50rpx 20rpx;

		.user_box {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			padding: 0 20rpx;

			.user_avatar {
				flex-shrink: 0;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.user_info {
				width: calc(100% - 120rpx);
				box-sizing: border-box;
				padding-left: 21rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;

				.nickname {
					width: 100%;
					box-sizing: border-box;
					font-size: 40rpx;
					color: #212121;
					font-weight: 500;
					line-height: 56rpx;
				}

				.userVip {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 30rpx;
					color: #FFFFFF;

					.vip {
						width: 58rpx;
						height: 58rpx;
					}

					.vipname {
						width: calc(100% - 58%);
						box-sizing: border-box;
						padding-left: 15rpx;
						font-size: 30rpx;
					}
				}
			}
		}

		.user_bot_box {
			width: 100%;
			box-sizing: border-box;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: #212121;

			.box_list {
				width: 346rpx;
				box-sizing: border-box;
				
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 12rpx 0;
				border-radius: 16rpx;

				.box-icon {
					width: 52rpx;
					height: 52rpx;
					margin-right: 15rpx;
				}

				.box_txt {
					font-size: 26rpx;
					line-height: 50rpx;
				}

			}    


		}

	}

	.userOrder {
		width: 100%;
		box-sizing: border-box;
		padding: 53rpx 30rpx 0rpx 30rpx;
		background: #FFFFFF;
		margin-top: 20rpx;

		.botgroup {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: wrap;

			.botgrouplist {
				width: 25%;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #140005;
				padding-bottom: 60rpx;
				text-align: center;

				.userlisticon {
					width: 66rpx;
					height: 66rpx;
					margin: 0 auto;

					.image {
						width: 100%;
						height: 100%;
					}
				}

				.listdsc {
					width: 100%;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #212121;
					line-height: 33rpx;
					padding-top: 11rpx;
				}
			}
		}


	}

	// 弹窗
	.customer {
		width: 580rpx;
		box-sizing: border-box;
		// background: url(../../..//popup.png) no-repeat;
		background-size: 100%;
		border-radius: 16rpx;
		text-align: center;
		background: #FFFFFF;
		padding: 20rpx;

		.title {
			width: 100%;
			box-sizing: border-box;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #212121;
		}

		.phone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 34rpx;
			color: #E42221;
			line-height: 50rpx;
		}

		.tuiimg {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
			text-align: center;
			border-radius: 10rpx;
		
			.tuipic {
				width: 220rpx;
				height: 220rpx;
			}
		}

		.sure {
			width: 260rpx;
			line-height: 60rpx;
			background: linear-gradient(to right, #DE3143, #E42221);
			text-align: center;
			margin: 10rpx auto;
			border-radius: 44rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}

	}
	
	.bundcont {
		width: 600rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		
	}
	.bindtitle {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
	}
	.bindinput {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
		
	}
	.input {
		width: 100%;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		// background: #F5F5F5;
		// border-radius: 10rpx;
		padding-left: 10rpx;
	}
	.popbot {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		color: #FFFFFF;
		background: #E42221;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-top: 60rpx;
	}
	
	.list_code {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
		padding: 20rpx 0;
		.reg_fr {
			width: 195rpx;
			box-sizing: border-box;
			margin: 0;
			.phone_code {
				width: 100%;
				font-size: 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #E42221;
				background: none;
				padding: 0;
			}
		}
		.reg_fl {
			width: calc(100% - 195rpx);
			box-sizing: border-box;
			padding-right: 5rpx;
			.input {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 36rpx;
			}
			.place {
				font-size: 30rpx;
				color: #999999;
			}
		}
	}
	
	
	
	
</style>
